<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		/* 
  			div设置最小宽度不会导致页面出现滚动条
  			只会导致div到达最小高度以后，页面无法继续缩小
  		*/
  		.container {
  			width: 50%;
  			height: 300px;
  			min-width: 300px;
  			margin:0 auto;
  		}
  		.radius_border_1 {
  			height: 1px;
  			margin: 0 2px;
  			background-color: red;
  		}
  		.radius_border_2 {
  			height: 1px;
  			margin: 0 1px;
  			background-color: red;
  			border-left: 1px solid red;
  			border-right: 1px solid red;
  		}
  		.content {
  			margin: 0 1px;
  			height: 200px;
			border-left: 1px solid red;
  			border-right: 1px solid red;
  		}
  	</style>
  </head>
  
  <body>
  	<!-- 通过像素画模拟圆角 -->
  	<div class="container">
  		<div class="radius_border_1"></div>
  		<div class="radius_border_2"></div>
  		<div class="content"></div>
  		<div class="radius_border_2"></div>
  		<div class="radius_border_1"></div>
  	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
        });
    </script>
  </body>
</html>